<template>
  <div class="step-wrap">
    <div
      class="step-item"
      v-for="(record, index) in approveRecords"
      :key="record.id"
      :class="'state-' + record?.processResult"
    >
      <div class="step-item-title flex">
        <img
          v-if="record?.processResult === ETaskReviewStatus['通过']"
          class="step-item-icon"
          src="@screen/images/finished.png"
        />
        <img
          v-else-if="record?.processResult === ETaskReviewStatus['不通过']"
          class="step-item-icon"
          src="@screen/images/refause.png"
        />
        <img
          v-else-if="record?.processResult === ETaskReviewStatus['流程终止']"
          class="step-item-icon"
          src="@screen/images/end.png"
        />
        <div v-else class="step-item-cur flex-row-center">{{ index + 1 }}</div>
        <div class="step-item-name">{{ record?.nodeName }}</div>
      </div>
      <div
        class="step-item-content"
        :class="{ last: index === approveRecords.length - 1 }"
      >
        <div>{{ record?.processUserName }}</div>
        <div v-if="record?.processResult">{{ record?.processTime }}</div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { TApproveRecords } from '@/plugins/approve'
import { ETaskReviewStatus } from '@/components/statusShow/util'

withDefaults(
  defineProps<{
    approveRecords: TApproveRecords
  }>(),
  {},
)
</script>

<style lang="scss" scoped>
.step-wrap {
  .step-item {
    &-title {
      font-size: vw(14);
      font-weight: 400;
    }
    .step-item-icon {
      width: vw(18);
      height: vh(18);
    }

    .step-item-name {
      margin-left: vw(8);
    }

    .step-item-cur {
      width: vw(18);
      height: vh(18);
      background: rgba(47, 102, 232, 1);
      font-size: vw(12);
      font-weight: 600;
      letter-spacing: 0px;
      color: rgba(255, 255, 255, 0.9);
      border-radius: 50%;
    }
    &-content {
      padding: 0 0 vh(17) vw(12);
      margin: vh(12) 0 vh(12) vw(8);
      font-size: vw(12);
      font-weight: 400;
      color: rgba(255, 255, 255, 0.6);
      border-left: vw(2) solid rgba(255, 255, 255, 0.4);

      &.last {
        border: none;
      }
    }
  }
}
.state-0,
.state-0 .step-item-content {
  color: rgba(47, 102, 232, 1) !important;
}
.state-2,
.state-2 .step-item-content {
  color: rgba(255, 56, 56, 1) !important;
}
.state-4,
.state-4 .step-item-content {
  color: rgba(102, 225, 223, 1) !important;
}
</style>
